<template>
  <div>
    <!--头部-->
    <mt-header title="爱阅读" fixed>
      <div v-if="$store.state.islogin" slot=right>
        欢迎：{{$store.state.username}}
      </div>
      <div v-else slot="right">
        <router-link class="r1" to="/register">注册</router-link>&nbsp;|
        <router-link class="r1" to="/login">登录</router-link>
      </div>
    </mt-header>
    <!--导航-->
    <mt-navbar style="margin-top: 40px;" v-model="navactive" fixed>
      <mt-tab-item v-for="(item,i) in category" :key="i" :id="(item.id).toString()">
        {{item.category_name}}
      </mt-tab-item>
    </mt-navbar>
    <!--内容面板-->
    <div class="tabcontainer" v-infinite-scroll="loadMore" infinite-scroll-distance="30" infinite-scroll-disabled="busy" :infinite-scroll-immediate-check="true">
      <!--轮播图-->
      <mt-swipe class="myswipe"
                :style="{height: imgHeight}"
                :speed="500"
                :auto="2000"
                :showIndicators="true"
                :continuous="true">
        <mt-swipe-item>
          <img src="../assets/1.jpeg">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../assets/2.jpeg">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../assets/3.jpeg">
        </mt-swipe-item>
        <mt-swipe-item>
          <img src="../assets/4.jpeg">
        </mt-swipe-item>
      </mt-swipe>

      <!--加载UI类别小的文章列表-->
      <!-- 单一文章信息开始 -->
      <div class="articleItem" v-for="(item,i) in articles" :key="i">
        <router-link :to="`/article?id=${item.id}`">
          <!-- 文章标题开始 -->
          <div class="articleItem-header">{{item.subject}}</div>
          <!-- 文章标题结束 -->
          <!-- 文章图文信息开始 -->
          <div class="articleItem-wrapper">
            <!-- 文章图像开始  -->
            <div class="articleImg">
              <img v-if="item.image" :src="item.image" />
            </div>
            <!-- 文章图像结束 -->
            <!-- 文章简介开始 -->
            <div class="articleDes">
              {{item.description}}
            </div>
            <!-- 文章简介结束 -->
          </div>
        </router-link>
        <!-- 文章图文信息结束 -->
      </div>
      <!-- 单一文章信息结束 -->
    </div>

    <!--底部选项卡-->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="home">
        <img src="../assets/common/main_1.png" v-if="selected=='home'" slot="icon">
        <img src="../assets/common/main_0.png" v-else slot="icon">
        首页
      </mt-tab-item>
      <mt-tab-item id="me">
        <img src="../assets/common/me_1.png" v-if="selected=='me'" slot="icon">
        <img src="../assets/common/me_0.png" v-else slot="icon">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data(){
    return{
      navactive:"1",
      selected:"home",
      imgHeight:"",
      category:[],   // 存储导航显示的类别列表
      articles: [],   // 存储当前页面显示的文章列表
      busy: false,    //用于控制无限滚动是否禁用
      page: 1         // 存储当前页码
    }
  },
  methods: {
    /** 初始化轮播图的高度 */
    initSwipeHeight(){
      //console.log(window.screen.width)
      let picw = 1024;  // 图片宽度
      let pich = 320;   // 图片高度
      let screenw = window.screen.width;  // 轮播图宽度
      // 比例一致所以：  轮播图宽 / 轮播图高 = 图片宽 / 图片高
      // 所以： 轮播图高 = （图片高 * 轮播图宽） / 图片高
      let height = Math.floor((pich * screenw) / picw) + 'px';
      this.imgHeight = height;
    },

    /**加载文章类别列表 更新页面导航 */
    loadCategory(){
      //基于axios发送请求，访问类别列表
      this.axios.get('/category').then(result=>{
        console.log(result)
        // 把类别列表存入data， 
        // 在template中使用v-for遍历输出导航item
        this.category=result.data.results
      })
    },
    /** 加载文章列表 
     *  cid：类别ID
     *  page： 页码
     *  callback： 拿到文章列表后的回调函数，将会返回articles数组
     */
    loadArticles(cid, page, callback){
      this.$indicator.open('加载中...')
      this.axios.get(`/articles?cid=${cid}&page=${page}`).then(result=>{
        // 处理文章的图片路径 require()
        let articles = result.data.results
        // 遍历articles中的图片资源路径，require处理一下
        articles.forEach(item=>{
          if(item.image!=null){
            item.image = require('../assets/articles/'+item.image)
          }
        })
        callback(articles)  // 回调callback
        this.$indicator.close();
      })
    },

    /** 加载下一页 */
    loadMore(){
      this.busy = true;  // 禁用无限滚动 防止loadMore的重复执行
      // 发送请求
      let cid = this.navactive;
      this.page++;
      console.log(`loadMore()...  cid=${cid}   page=${this.page}`)
      // 加载列表
      this.loadArticles(cid, this.page, (articles)=>{
        // 追加
        this.articles = [...this.articles, ...articles];
        this.busy = false;    //重新启用无限滚动
      })
    },

  },
  /** 页面mounted 挂载完毕后，动态计算轮播图高度，并设置imgHeight */
  mounted() {
    /**初始化轮播图高度*/
    this.initSwipeHeight()

    /**加载文章类别列表 更新页面导航 */
    this.loadCategory()

    /**加载UI类别下的文章列表 */
    // 发送请求，加载类别列表，更新UI
    this.axios.get('/category').then((result)=>{
      console.log(result)
      // 把类别列表存入data， 
      // 在template中使用v-for遍历输出导航item
      this.category = result.data.results
    })

    // 发送请求，加载ui类别下的第一页文章数据，显示在界面上
    this.loadArticles(1, 1, (articles)=>{
      // 把data中的article替换掉
      this.articles = articles;
    });

  },
  watch: {
    /** 监听顶部导航的切换 */
    navactive(newval){
      // 把page初始化为1
      this.page = 1;
      window.scrollTo(0, 0);  // 控制窗口滚动条滚动到顶部
      // 发送请求，加载列表
      this.loadArticles(newval, 1, (articles)=>{
        this.articles = articles;
      })

    },

    /** 监听底部选项卡 */
    selected(newval){
      console.log(newval)
      // 一旦选择了其它选项卡，触发selected的变化
      if(newval=='home'){
        this.$router.push('/')
      }else if(newval=='me'){
        this.$router.push('/me')
      }
    }
  }
}
</script>

<style scoped>
.r1{
  color: white
}
.tabcontainer{
  position:fixed;
  top: 90px;
  left: 0;
  right: 0;
  bottom: 55px;
  overflow-y:scroll;
}
.myswipe img{
  width: 100%;
}
.articleItem {
  padding: 10px 0;
  margin: 0 10px;
  border-bottom: 1px solid #999;
}
.articleItem-header {
  font-weight: 600;
  font-size: 17px;
  color: #1a1a1a;
  line-height: 22px;
}
.articleItem-wrapper {
  display: flex;
  align-items: center;
  padding-top: 10px;
  width: 100%;
}
.articleImg {
  margin-right: 15px;
}
.articleImg img {
  width: 112px;
  height: 74px;
  border-radius: 5px;
}
.articleDes {
  height: 65px;
  font-size: 15px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
  line-height: 21px;
  letter-spacing: normal;
  color: #444;
}
</style>
